<template>
  <div class="global-box preset">
    <a-card :body-style="{ padding: '24px' }" :bordered="false">
      <a-form-model
        class="exam"
        ref="presetForm"
        :model="presetForm"
        :rules="examFormRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="课程目录" :wrapperCol="{ span: 5 }">
          <a-cascader
            :field-names="{ label: 'value', value: 'id', children: 'children' }"
            :options="directoryOptions"
            :load-data="loadData"
            placeholder="请选择课程目录"
            change-on-select
            v-model="presetForm.directory"
          />
        </a-form-item>
        <a-form-model-item label="考试次数" prop="number">
          <a-radio-group v-model="presetForm.number" @change="changeNumber">
            <a-radio :value="item.value" v-for="item in numList" :key="item.value">{{
              item.label
            }}</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <div v-if="presetForm.number == 4">
          <a-form-model-item label="开始年份" prop="startYear" class="width">
            <a-select v-model="presetForm.startYear" placeholder="请选择考期">
              <a-select-option :key="item.value" :value="item.value" v-for="item in yearList">{{
                item.label
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="考试周期" prop="eaxm" class="width">
            <a-select v-model="presetForm.eaxm" placeholder="请选择考期">
              <a-select-option :key="item.value" :value="item.value" v-for="item in yearList">{{
                item.label
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
        <a-row v-if="presetForm.number == 2">
          <a-col :span="6" :offset="3">
            <a-divider dashed>上半年考试</a-divider>
          </a-col>
        </a-row>
        <div v-if="presetForm.number != 3">
          <a-form-model-item label="报名日期" prop="applyDate">
            <a-range-picker
              :disabled-date="disabledDate"
              type="date"
              format="YYYY-MM-DD"
              v-model="presetForm.applyDate"
              @change="applyDateChange"
            />
          </a-form-model-item>
          <a-form-model-item label="考试日期" prop="testDate">
            <a-range-picker
              :disabled-date="disabledDate"
              type="date"
              format="YYYY-MM-DD"
              v-model="presetForm.testDate"
              @change="testDateChange"
            />
          </a-form-model-item>
          <a-form-model-item label="成绩公布日期" prop="releaseDate">
            <a-range-picker
              :disabled-date="disabledDate"
              type="date"
              format="YYYY-MM-DD"
              v-model="presetForm.releaseDate"
              @change="releaseDateChange"
            />
          </a-form-model-item>
        </div>
        <div v-if="presetForm.number == 2">
          <a-row>
            <a-col :span="6" :offset="3">
              <a-divider dashed>下半年考试</a-divider>
            </a-col>
          </a-row>
          <a-form-model-item label="报名日期" prop="applyDateBot">
            <a-range-picker
              :disabled-date="disabledDate"
              type="date"
              format="YYYY-MM-DD"
              v-model="presetForm.applyDateBot"
              @change="applyDateChangeB"
            />
          </a-form-model-item>
          <a-form-model-item label="考试日期" prop="testDateBot">
            <a-range-picker
              :disabled-date="disabledDate"
              type="date"
              format="YYYY-MM-DD"
              v-model="presetForm.testDateBot"
              @change="testDateChangeB"
            />
          </a-form-model-item>
          <a-form-model-item label="成绩公布日期" prop="releaseDateBot">
            <a-range-picker
              :disabled-date="disabledDate"
              type="date"
              format="YYYY-MM-DD"
              v-model="presetForm.releaseDateBot"
              @change="releaseDateChangeB"
            />
          </a-form-model-item>
        </div>
        <div v-if="presetForm.number == 3">
          <a-row style="margin-bottom: 24px">
            <a-col :span="6" :offset="3">
              <a-tag color="blue">
                <a-icon type="info-circle" />考试次数若选择“一年多次”则不需要填写考试相关日期
              </a-tag>
            </a-col>
          </a-row>
        </div>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 5 }">
          <a-button type="primary" @click="onSubmit">提交</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>
<script>
import { directory, edit, add } from '@/api/examination/preset'
import moment from 'moment'
export default {
  data () {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 10 },
      numList: [{
        label: '一年一次',
        value: 1
      }, {
        label: '一年两次',
        value: 2
      }, {
        label: '一年多次',
        value: 3
      }, {
        label: '多年一次',
        value: 4
      }],
      presetForm: {
        directory: [],
        number: 1,
        applyDate: undefined,
        testDate: undefined,
        releaseDate: undefined,
        applyDateBot: undefined,
        testDateBot: undefined,
        releaseDateBot: undefined,
        startYear: undefined,
        eaxm: undefined
      },
      examFormRules: {
        number: [{ required: true, message: '请选择考试次数', trigger: 'change' }],
        applyDate: [{ required: true, message: '请选择报名日期', trigger: 'change' }],
        testDate: [{ required: true, message: '请选择考试日期', trigger: 'change' }],
        releaseDate: [{ required: true, message: '请选择成绩公布日期', trigger: 'change' }],
        applyDateBot: [{ required: true, message: '请选择报名日期', trigger: 'change' }],
        testDateBot: [{ required: true, message: '请选择考试日期', trigger: 'change' }],
        releaseDateBot: [{ required: true, message: '请选择成绩公布日期', trigger: 'change' }],
        startYear: [{ required: true, message: '请选择开始年份', trigger: 'change' }],
        eaxm: [{ required: true, message: '请输入考试周期', trigger: 'blur' }]
      },
      editData: '',
      yearList: [{
        label: 2020,
        value: 2020
      }, {
        label: 2021,
        value: 2021
      }, {
        label: 2022,
        value: 2022
      }, {
        label: 2023,
        value: 2023
      }, {
        label: 2024,
        value: 2024
      }, {
        label: 2025,
        value: 2025
      }, {
        label: 2026,
        value: 2026
      }, {
        label: 2027,
        value: 2027
      }, {
        label: 2028,
        value: 2028
      }, {
        label: 2029,
        value: 2029
      }, {
        label: 2030,
        value: 2030
      }],
      directoryOptions: []
    }
  },
  mounted () {
    this.getDirectory()
    if (this.$route.params.re && this.$route.params.re !== '') {
      this.editData = this.$route.params.re
      this.getData()
    }
  },
  methods: {
    moment,
    // 编辑回显数据
    getData () {
      if (this.editData.directoryId !== 0) {
        this.presetForm.directory[0] = this.editData.directoryId
      }
      if (this.editData.examId !== 0) {
        this.presetForm.directory[1] = this.editData.examId
      }
      this.presetForm.number = this.editData.examinationType
      this.presetForm.applyDate = (this.editData.bmEndTimeOne + ',' + this.editData.bmStartTimeOne).split(',')
      this.presetForm.testDate = (this.editData.ksStartTimeOne + ',' + this.editData.ksEndTimeOne).split(',')
      this.presetForm.releaseDate = (this.editData.cjStartTimeOne + ',' + this.editData.cjEndTimeOne).split(',')
      this.presetForm.applyDateBot = (this.editData.bmStartTimeTwo + ',' + this.editData.bmEndTimeTwo).split(',')
      this.presetForm.testDateBot = (this.editData.ksStartTimeTwo + ',' + this.editData.ksEndTimeTwo).split(',')
      this.presetForm.releaseDateBot = (this.editData.cjStartTimeTwo + ',' + this.editData.cjEndTimeTwo).split(',')
      this.presetForm.startYear = this.editData.year
      this.presetForm.eaxm = this.editData.examinationYear
    },
    // 当前日期之前禁止 选中
    disabledDate (current) {
      return current && current < moment().endOf('day')
    },
    changeNumber (e) {
      this.$refs.presetForm.resetFields()
      this.presetForm.number = e.target.value
    },
    // 获取日期格式
    applyDateChange (val, dateString) {
      this.presetForm.applyDate = dateString
    },
    testDateChange (val, dateString) {
      this.presetForm.testDate = dateString
    },
    releaseDateChange (val, dateString) {
      this.presetForm.releaseDate = dateString
    },
    applyDateChangeB (val, dateString) {
      this.presetForm.applyDateBot = dateString
    },
    testDateChangeB (val, dateString) {
      this.presetForm.testDateBot = dateString
    },
    releaseDateChangeB (val, dateString) {
      this.presetForm.releaseDateBot = dateString
    },
    onSubmit () {
      this.$refs.presetForm.validate(valid => {
        if (valid) {
          this.save()
        } else {
          return false
        }
      })
    },
    save () {
      const data = {
        year: this.presetForm.startYear || '',
        examinationType: this.presetForm.number,
        directoryId: this.presetForm.directory[0],
        directoryName: '',
        period: this.presetForm.eaxm || 0,
        creatorId: 3645276,
        creatorName: '',
        examinationYear: 0
      }
      if (this.presetForm.directory[1]) {
        data.examId = this.presetForm.directory[1]
        data.examName = ''
      }
      if (this.presetForm.number !== 3) {
        data.bmEndTimeOne = this.presetForm.applyDate[0] + ' 00:00:00'
        data.bmStartTimeOne = this.presetForm.applyDate[1] + ' 00:00:00'
        data.ksStartTimeOne = this.presetForm.testDate[0] + ' 00:00:00'
        data.ksEndTimeOne = this.presetForm.testDate[1] + ' 00:00:00'
        data.cjStartTimeOne = this.presetForm.releaseDate[0] + ' 00:00:00'
        data.cjEndTimeOne = this.presetForm.releaseDate[1] + ' 00:00:00'
      }
      if (this.presetForm.number === 2) {
        data.bmStartTimeTwo = this.presetForm.applyDateBot[0] + ' 00:00:00'
        data.bmEndTimeTwo = this.presetForm.applyDateBot[1] + ' 00:00:00'
        data.ksStartTimeTwo = this.presetForm.testDateBot[0] + ' 00:00:00'
        data.ksEndTimeTwo = this.presetForm.testDateBot[1] + ' 00:00:00'
        data.cjStartTimeTwo = this.presetForm.releaseDateBot[0] + ' 00:00:00'
        data.cjEndTimeTwo = this.presetForm.releaseDateBot[1] + ' 00:00:00'
      }
      if (this.editData === '') {
        add(data).then(res => {
          if (res.code === '1') {
            this.$message.success(res.msg)
            this.$router.push({
              name: 'preset'
            })
          }
        }).catch(err => {
          this.$message.error(err.msg)
        })
      } else {
        data.creatorId = this.editData.creatorId
        edit(data).then(res => {
          if (res.code === '1') {
            this.$message.success(res.msg)
            this.$router.push({
              name: 'preset'
            })
          }
        }).catch(err => {
          this.$message.error(err.msg)
        })
      }
    },
    // 获取课程目录
    getDirectory () {
      const data = {
        type: 0,
        directoryLevel: 1
      }
      directory(data).then(res => {
        if (res.code === '1') {
          res.data.forEach(item => {
            item.isLeaf = false
          })
          this.directoryOptions = res.data
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 课程目录二级-六级
    loadData (selectedOptions) {
      if (this.presetForm.directory[1]) {
        return false
      }
      const targetOption = selectedOptions[selectedOptions.length - 1]
      const data = {
        type: 1,
        parentId: targetOption.id,
        directoryLevel: 2
      }
      targetOption.loading = true
      directory(data).then(res => {
        if (res.code === '1') {
          if (res.data.length > 0) {
            res.data.forEach(item => {
              item.isLeaf = false
            })
            targetOption.loading = false
            targetOption.children = [...res.data]
          } else {
            targetOption.loading = false
            this.$message.error('暂无更多数据')
          }
        } else {
          targetOption.loading = false
          this.$message.error(res.msg)
        }
        this.directoryOptions = [...this.directoryOptions]
      }).catch(err => {
        this.$message.error(err.msg)
        targetOption.loading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.preset {
  margin-top: 40px;
}
</style>
<style lang="less">
.preset {
  .ant-tag {
    padding: 5px 20px;
    .anticon {
      padding-right: 10px;
    }
  }
  .width {
    .ant-form-item-control {
      width: 51.5%;
    }
  }
}
</style>
